import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:life_service/color/hex.dart';
import 'package:life_service/extensions/ex_widget.dart';
import 'package:life_service/route/index.dart';
import 'package:life_service/sliver/sliver_adsorption_header.dart';
import 'package:life_service/utils/radian.dart';
import 'package:life_service/utils/styles.dart';
import 'package:life_service/utils/tools.dart';
import 'package:scrollview_observer/scrollview_observer.dart';

import 'controller.dart';

class HotelMainPage extends GetView<HotelMainController> {
  const HotelMainPage({super.key});

  Widget buildMain(BuildContext context) {
    return DefaultTabController(
      length: controller.tabs.length,
      child: Scaffold(
        backgroundColor: HexColor.hex(HexColor.colorF7f7),
        body: NestedScrollView(
          controller: controller.scrollController,
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return [
              SliverPersistentHeader(
                pinned: true,
                floating: false,
                delegate: SliverHeaderAutomaticDelegate(
                  controller: controller.scrollController,
                  expandedWidget: SizedBox(
                    height: 250,
                    child: Stack(
                      fit: StackFit.expand,
                      children: [
                        Image.network(
                          'https://img2.baidu.com/it/u=1843334751,148457494&fm=253&fmt=auto&app=138&f=JPEG?w=725&h=500',
                          height: 250,
                          width: Get.width,
                          fit: BoxFit.fill,
                        ),
                        Positioned(
                          top: 0,
                          left: 0,
                          right: 0,
                          child: Container(
                            height: 44 + Get.mediaQuery.padding.top,
                            padding: Get.mediaQuery.padding,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                IconButton(
                                  onPressed: Get.back,
                                  icon: const Icon(
                                    CupertinoIcons.chevron_back,
                                    size: 20,
                                    color: Colors.white,
                                  ),
                                ),
                                Wrap(
                                  spacing: 5,
                                  crossAxisAlignment: WrapCrossAlignment.center,
                                  alignment: WrapAlignment.end,
                                  children: [
                                    IconButton(
                                      onPressed: () {},
                                      icon: const Icon(
                                        CupertinoIcons.compass_fill,
                                        size: 20,
                                        color: Colors.white,
                                      ),
                                    ),
                                    IconButton(
                                      onPressed: () {},
                                      icon: const Icon(
                                        CupertinoIcons.heart_fill,
                                        size: 20,
                                        color: Colors.white,
                                      ),
                                    ),
                                    IconButton(
                                      onPressed: () {},
                                      icon: const Icon(
                                        CupertinoIcons.location_fill,
                                        size: 20,
                                        color: Colors.white,
                                      ),
                                    ),
                                  ],
                                )
                              ],
                            ),
                          ),
                        ),
                        Positioned(
                          left: (Get.width - 334) / 2,
                          bottom: 0,
                          child: Container(
                            height: 40,
                            width: 334,
                            padding: const EdgeInsets.only(left: 15),
                            decoration: const BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(4),
                                topRight: Radius.circular(4),
                              ),
                            ),
                            alignment: Alignment.bottomLeft,
                            child: Text.rich(
                              TextSpan(
                                children: [
                                  TextSpan(
                                    text: '贯通现代酒店（北京前门店）',
                                    style: StylesUtils.customTextStyle(
                                      fontWeight: FontWeight.w700,
                                      color: HexColor.color3333,
                                      fontSize: StylesUtils.fontSize18,
                                    ),
                                  ),
                                  TextSpan(
                                    text: ' 五星级',
                                    style: StylesUtils.customTextStyle(
                                      color: HexColor.colorFfc7,
                                      fontSize: StylesUtils.fontSize12,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                  expandedBrightness: Brightness.light,
                  expandedColors: Colors.transparent,
                  expandedHeight: 250,
                  collapsedBrightness: Brightness.dark,
                  collapsedColors: Colors.white,
                  collapsedWidget: animationWidget,
                  animationController: controller.animationController,
                  collapsedHeight: 88,
                  paddingTop: Get.mediaQuery.padding.top,
                  durationAnimation: const Duration(milliseconds: 100),
                ),
              ),
            ];
          },
          body: ListViewObserver(
            controller: controller.observerController,
            child: ListView(
              padding: EdgeInsets.zero,
              controller: controller.scrollController,
              children: [
                Column(
                  children: [
                    Center(
                      child: Container(
                        width: 334,
                        padding: const EdgeInsets.only(top: 15, bottom: 15),
                        decoration: const BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.only(
                            bottomLeft: Radius.circular(4),
                            bottomRight: Radius.circular(4),
                          ),
                        ),
                        child: Column(
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text.rich(
                                  TextSpan(
                                    children: [
                                      WidgetSpan(
                                          child: Wrap(
                                            spacing: 5,
                                            crossAxisAlignment:
                                                WrapCrossAlignment.center,
                                            alignment: WrapAlignment.start,
                                            children: [
                                              for (var i = 0; i < 5; i++)
                                                Icon(
                                                  CupertinoIcons.star_fill,
                                                  size: 12,
                                                  color: HexColor(
                                                      HexColor.colorFfc7),
                                                ),
                                            ],
                                          ),
                                          alignment:
                                              PlaceholderAlignment.middle),
                                      TextSpan(
                                        text: '  4.9分',
                                        style: StylesUtils.customTextStyle(
                                          fontWeight: FontWeight.w700,
                                          color: HexColor.colorFfc7,
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                                Text.rich(
                                  TextSpan(
                                    children: [
                                      TextSpan(
                                        text: '599条评价 ',
                                        style: StylesUtils.customTextStyle(
                                          color: HexColor.colorFf62,
                                          fontSize: StylesUtils.fontSize12,
                                        ),
                                      ),
                                      WidgetSpan(
                                        child: Icon(
                                          CupertinoIcons.chevron_right,
                                          size: 12,
                                          color: HexColor(HexColor.color9999),
                                        ),
                                        alignment: PlaceholderAlignment.middle,
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ).paddingSymmetric(horizontal: 15),
                            Divider(
                              color: HexColor(HexColor.colorCccc),
                              height: 40,
                              thickness: 0.5,
                              indent: 0,
                              endIndent: 0,
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Center(
                                  child: Icon(
                                    CupertinoIcons.map_fill,
                                    size: 20,
                                    color: HexColor(HexColor.colorFf62),
                                  ),
                                ),
                                Expanded(
                                  child: Padding(
                                    padding: const EdgeInsets.only(
                                        left: 10, right: 20),
                                    child: Column(
                                      children: [
                                        Container(
                                          alignment: Alignment.centerLeft,
                                          child: Text(
                                            '和平西桥樱花西街89号',
                                            style: StylesUtils.customTextStyle(
                                              color: HexColor.color3333,
                                            ),
                                          ),
                                        ),
                                        Container(
                                          margin: const EdgeInsets.only(top: 8),
                                          alignment: Alignment.centerLeft,
                                          child: Text(
                                            '距和平西桥地铁站直线0.2公里，步行约0.8公里，预计5分钟',
                                            style: StylesUtils.customTextStyle(
                                              lineHeight: 1.4,
                                              fontSize: StylesUtils.fontSize12,
                                              color: HexColor.color9999,
                                            ),
                                          ),
                                        )
                                      ],
                                    ),
                                  ),
                                ),
                                Center(
                                  child: Text.rich(
                                    TextSpan(
                                      children: [
                                        TextSpan(
                                          text: '地图/导航 ',
                                          style: StylesUtils.customTextStyle(
                                            color: HexColor.colorFf62,
                                            fontSize: StylesUtils.fontSize12,
                                          ),
                                        ),
                                        WidgetSpan(
                                          child: Icon(
                                            CupertinoIcons.chevron_right,
                                            size: 12,
                                            color: HexColor(HexColor.color9999),
                                          ),
                                          alignment:
                                              PlaceholderAlignment.middle,
                                        ),
                                      ],
                                    ),
                                  ),
                                )
                              ],
                            ).paddingSymmetric(horizontal: 15)
                          ],
                        ),
                      ),
                    ),
                    Container(
                      margin: const EdgeInsets.symmetric(vertical: 15),
                      alignment: Alignment.center,
                      child: Container(
                        height: 58,
                        width: 334,
                        padding: const EdgeInsets.symmetric(horizontal: 15),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(4),
                          boxShadow: [
                            BoxShadow(
                              blurStyle: BlurStyle.outer,
                              offset: Offset.zero,
                              blurRadius: 5,
                              spreadRadius: 0,
                              color: HexColor.rgba(
                                  204, 204, 204, 0.349019607843137),
                            ),
                          ],
                        ),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Wrap(
                              spacing: 10,
                              crossAxisAlignment: WrapCrossAlignment.center,
                              alignment: WrapAlignment.start,
                              children: [
                                Text(
                                  '优惠券',
                                  style: StylesUtils.customTextStyle(
                                    color: HexColor.color3333,
                                  ),
                                ),
                                Container(
                                  constraints: const BoxConstraints.expand(
                                      width: 86, height: 26),
                                  decoration: BoxDecoration(
                                    color: HexColor.rgba(
                                        255, 98, 98, 0.0980392156862745),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '满200减30',
                                    style: StylesUtils.customTextStyle(
                                      color: HexColor.colorFf62,
                                      fontSize: StylesUtils.fontSize12,
                                    ),
                                  ),
                                )
                              ],
                            ),
                            Text.rich(
                              TextSpan(
                                children: [
                                  TextSpan(
                                    text: '领取 ',
                                    style: StylesUtils.customTextStyle(
                                      color: HexColor.colorFf62,
                                      fontSize: StylesUtils.fontSize12,
                                    ),
                                  ),
                                  WidgetSpan(
                                    child: Icon(
                                      CupertinoIcons.chevron_right,
                                      size: 12,
                                      color: HexColor(HexColor.color9999),
                                    ),
                                    alignment: PlaceholderAlignment.middle,
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    for (var i = 0; i < 10; i++)
                      Container(
                        padding: EdgeInsets.symmetric(
                            vertical: 10, horizontal: (Get.width - 334) / 2),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          boxShadow: [
                            BoxShadow(
                              blurStyle: BlurStyle.outer,
                              offset: Offset.zero,
                              blurRadius: 4,
                              spreadRadius: 0,
                              color: HexColor.rgba(242, 242, 242, 1),
                            ),
                          ],
                        ),
                        child: Column(
                          children: [
                            Container(
                              height: 40,
                              margin: const EdgeInsets.only(bottom: 15),
                              padding:
                                  const EdgeInsets.symmetric(horizontal: 10),
                              decoration: BoxDecoration(
                                  color: HexColor.rgba(
                                      255, 98, 98, 0.0980392156862745),
                                  borderRadius: BorderRadius.circular(8)),
                              child: Row(
                                children: [
                                  Expanded(
                                    flex: 2,
                                    child: Align(
                                      alignment: Alignment.centerLeft,
                                      child: Text.rich(
                                        TextSpan(
                                          children: [
                                            TextSpan(
                                              text: '12月17日',
                                              style:
                                                  StylesUtils.customTextStyle(
                                                fontSize:
                                                    StylesUtils.fontSize16,
                                                color: HexColor.color3333,
                                              ),
                                            ),
                                            TextSpan(
                                              text: ' 入住',
                                              style:
                                                  StylesUtils.customTextStyle(
                                                fontSize:
                                                    StylesUtils.fontSize12,
                                                color: HexColor.colorCccc,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                  ),
                                  Expanded(
                                    flex: 2,
                                    child: Align(
                                      alignment: Alignment.center,
                                      child: Text.rich(
                                        TextSpan(
                                          children: [
                                            TextSpan(
                                              text: '12月18日',
                                              style:
                                                  StylesUtils.customTextStyle(
                                                fontSize:
                                                    StylesUtils.fontSize16,
                                                color: HexColor.color3333,
                                              ),
                                            ),
                                            TextSpan(
                                              text: ' 离店',
                                              style:
                                                  StylesUtils.customTextStyle(
                                                fontSize:
                                                    StylesUtils.fontSize12,
                                                color: HexColor.colorCccc,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                  ),
                                  Expanded(
                                      child: Align(
                                    alignment: Alignment.centerRight,
                                    child: Text.rich(
                                      TextSpan(
                                        children: [
                                          TextSpan(
                                            text: '共1晚 ',
                                            style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize12,
                                              color: HexColor.color3333,
                                            ),
                                          ),
                                          WidgetSpan(
                                            child: Icon(
                                              CupertinoIcons.chevron_forward,
                                              size: 12,
                                              color:
                                                  HexColor(HexColor.colorCccc),
                                            ),
                                            alignment:
                                                PlaceholderAlignment.middle,
                                          ),
                                        ],
                                      ),
                                    ),
                                  )),
                                ],
                              ),
                            ),
                            Container(
                              margin: const EdgeInsets.only(bottom: 20),
                              height: 115,
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.start,
                                crossAxisAlignment: CrossAxisAlignment.stretch,
                                children: [
                                  ClipRRect(
                                    borderRadius: BorderRadius.circular(5),
                                    child: Stack(
                                      children: [
                                        Image.network(
                                          'https://img1.baidu.com/it/u=1356030412,2267672075&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
                                          width: 90,
                                          height: 110,
                                          fit: BoxFit.fill,
                                        ),
                                        Positioned(
                                          bottom: 5,
                                          right: 8,
                                          child: Container(
                                            alignment: Alignment.center,
                                            constraints:
                                                const BoxConstraints.expand(
                                                    width: 40, height: 20),
                                            decoration: BoxDecoration(
                                              borderRadius:
                                                  BorderRadius.circular(10),
                                              color: HexColor.rgba(
                                                  0, 0, 0, 0.658823529411765),
                                            ),
                                            child: Text(
                                              '5张',
                                              style:
                                                  StylesUtils.customTextStyle(
                                                fontSize:
                                                    StylesUtils.fontSize10,
                                              ),
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  Expanded(
                                    child: Padding(
                                      padding: const EdgeInsets.only(left: 10),
                                      child: Column(
                                        children: [
                                          Container(
                                            alignment: Alignment.centerLeft,
                                            child: Text(
                                              '标准单间（有窗）',
                                              style:
                                                  StylesUtils.customTextStyle(
                                                fontSize:
                                                    StylesUtils.fontSize16,
                                                color: HexColor.color3333,
                                                fontWeight: FontWeight.w700,
                                              ),
                                            ),
                                          ),
                                          Container(
                                            margin:
                                                const EdgeInsets.only(top: 6),
                                            alignment: Alignment.centerLeft,
                                            child: Text(
                                              '不含早 22㎡大床  无窗',
                                              style:
                                                  StylesUtils.customTextStyle(
                                                color: HexColor.color9999,
                                                fontSize:
                                                    StylesUtils.fontSize12,
                                              ),
                                            ),
                                          ),
                                          Container(
                                            alignment: Alignment.centerLeft,
                                            margin: const EdgeInsets.symmetric(
                                                vertical: 6),
                                            child: Text(
                                              '12点前可取消',
                                              style:
                                                  StylesUtils.customTextStyle(
                                                color: HexColor.color28d0,
                                                fontSize:
                                                    StylesUtils.fontSize12,
                                              ),
                                            ),
                                          ),
                                          Container(
                                            alignment: Alignment.centerLeft,
                                            child: Text.rich(
                                              TextSpan(
                                                children: [
                                                  TextSpan(
                                                    text: '¥',
                                                    style: StylesUtils
                                                        .customTextStyle(
                                                      color: HexColor.colorFf62,
                                                      fontWeight:
                                                          FontWeight.w700,
                                                    ),
                                                  ),
                                                  TextSpan(
                                                    text: '360',
                                                    style: StylesUtils
                                                        .customTextStyle(
                                                      fontSize: StylesUtils
                                                          .fontSize20,
                                                      color: HexColor.colorFf62,
                                                      fontWeight:
                                                          FontWeight.w700,
                                                    ),
                                                  ),
                                                  TextSpan(
                                                    text: '  ',
                                                    style: StylesUtils
                                                        .customTextStyle(
                                                      color: HexColor.color9999,
                                                    ),
                                                  ),
                                                  TextSpan(
                                                    text: '¥365',
                                                    style: StylesUtils
                                                        .customTextStyle(
                                                      color: HexColor.color9999,
                                                      decoration: TextDecoration
                                                          .lineThrough,
                                                      decorationColor: HexColor(
                                                          HexColor.color9999),
                                                      decorationStyle:
                                                          TextDecorationStyle
                                                              .solid,
                                                      decorationThickness: 1,
                                                    ),
                                                  ),
                                                ],
                                              ),
                                            ),
                                          ),
                                          Container(
                                            margin:
                                                const EdgeInsets.only(top: 10),
                                            alignment: Alignment.centerLeft,
                                            child: Wrap(
                                              spacing: 10,
                                              crossAxisAlignment:
                                                  WrapCrossAlignment.center,
                                              alignment: WrapAlignment.start,
                                              children: controller.tags
                                                  .map(
                                                    (str) =>
                                                        Builder(builder: (_) {
                                                      final style = StylesUtils
                                                          .customTextStyle(
                                                              fontSize:
                                                                  StylesUtils
                                                                      .fontSize10,
                                                              color: HexColor
                                                                  .colorFfc7);
                                                      double w = ToolsUtils
                                                          .calculateTextWidth(
                                                              value: str,
                                                              style: style,
                                                              maxWidth: 100.0);
                                                      return Container(
                                                        alignment:
                                                            Alignment.center,
                                                        constraints:
                                                            BoxConstraints.expand(
                                                                width: (w +
                                                                        30.0)
                                                                    .toDouble(),
                                                                height: 20.0),
                                                        decoration:
                                                            BoxDecoration(
                                                          border: Border.all(
                                                            color: HexColor(
                                                                HexColor
                                                                    .colorFfc7),
                                                          ),
                                                        ),
                                                        child: Text(
                                                          str,
                                                          style: style,
                                                        ),
                                                      );
                                                    }),
                                                  )
                                                  .toList(),
                                            ),
                                          )
                                        ],
                                      ),
                                    ),
                                  ),
                                  Center(
                                    child: SizedBox(
                                      width: 54,
                                      height: 80,
                                      child: Column(
                                        children: [
                                          Container(
                                            height: 32,
                                            alignment: Alignment.center,
                                            decoration: BoxDecoration(
                                                borderRadius:
                                                    const BorderRadius.only(
                                                  topLeft: Radius.circular(4),
                                                  topRight: Radius.circular(4),
                                                ),
                                                color: HexColor(
                                                    HexColor.colorFf62)),
                                            child: Text(
                                              '订',
                                              style:
                                                  StylesUtils.customTextStyle(
                                                fontSize:
                                                    StylesUtils.fontSize20,
                                                fontWeight: FontWeight.w700,
                                              ),
                                            ),
                                          ),
                                          Container(
                                            height: 28,
                                            decoration: BoxDecoration(
                                              color: HexColor.rgba(255, 98, 98,
                                                  0.0980392156862745),
                                              borderRadius:
                                                  const BorderRadius.only(
                                                      bottomLeft:
                                                          Radius.circular(4),
                                                      bottomRight:
                                                          Radius.circular(4)),
                                              border: Border.all(
                                                color: HexColor(
                                                    HexColor.colorFf62),
                                              ),
                                            ),
                                            alignment: Alignment.center,
                                            child: Text(
                                              '在线订',
                                              style:
                                                  StylesUtils.customTextStyle(
                                                fontSize:
                                                    StylesUtils.fontSize12,
                                                color: HexColor.colorFf62,
                                              ),
                                            ),
                                          ),
                                          Container(
                                            margin:
                                                const EdgeInsets.only(top: 6),
                                            alignment: Alignment.center,
                                            child: Text(
                                              '仅剩1天',
                                              style:
                                                  StylesUtils.customTextStyle(
                                                fontSize:
                                                    StylesUtils.fontSize12,
                                                color: HexColor.colorFf62,
                                              ),
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            )
                          ],
                        ),
                      ),
                  ],
                ),
                Container(
                  margin: const EdgeInsets.only(top: 15),
                  height: 200,
                  padding: const EdgeInsets.symmetric(horizontal: 15),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    boxShadow: [
                      BoxShadow(
                          offset: Offset.zero,
                          blurStyle: BlurStyle.outer,
                          spreadRadius: 0,
                          blurRadius: 4,
                          color: HexColor.rgba(242, 242, 242, 1))
                    ],
                  ),
                  child: Column(
                    children: [
                      SizedBox(
                        height: 40,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              '酒店设施',
                              style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize16,
                                color: HexColor.color3333,
                                fontWeight: FontWeight.w700,
                              ),
                            ),
                            Text.rich(
                              TextSpan(
                                children: [
                                  TextSpan(
                                    text: '更多详情 ',
                                    style: StylesUtils.customTextStyle(
                                      color: HexColor.colorFf62,
                                      fontSize: StylesUtils.fontSize12,
                                    ),
                                  ),
                                  WidgetSpan(
                                    child: Icon(
                                      CupertinoIcons.chevron_right,
                                      size: 12,
                                      color: HexColor(HexColor.color9999),
                                    ),
                                    alignment: PlaceholderAlignment.middle,
                                  ),
                                ],
                              ),
                            ).onTap(() {
                              Get.toNamed(Routes.hotelInfo);
                            }),
                          ],
                        ),
                      ),
                      StaggeredGrid.count(
                        crossAxisCount: 5,
                        crossAxisSpacing: 10,
                        mainAxisSpacing: 15,
                        children: [
                          Column(
                            children: [
                              Container(
                                alignment: Alignment.center,
                                child: Icon(
                                  CupertinoIcons.wifi,
                                  size: 25,
                                  color: HexColor(HexColor.color3333),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 5),
                                alignment: Alignment.center,
                                child: Text(
                                  'WIFI',
                                  style: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize12,
                                    color: HexColor.color3333,
                                  ),
                                ),
                              )
                            ],
                          ),
                          Column(
                            children: [
                              Container(
                                alignment: Alignment.center,
                                child: Icon(
                                  CupertinoIcons.hourglass,
                                  size: 25,
                                  color: HexColor(HexColor.color3333),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 5),
                                alignment: Alignment.center,
                                child: Text(
                                  '自助餐厅',
                                  style: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize12,
                                    color: HexColor.color3333,
                                  ),
                                ),
                              )
                            ],
                          ),
                          Column(
                            children: [
                              Container(
                                alignment: Alignment.center,
                                child: Icon(
                                  CupertinoIcons.hammer_fill,
                                  size: 25,
                                  color: HexColor(HexColor.color3333),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 5),
                                alignment: Alignment.center,
                                child: Text(
                                  '停车场',
                                  style: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize12,
                                    color: HexColor.color3333,
                                  ),
                                ),
                              )
                            ],
                          ),
                          Column(
                            children: [
                              Container(
                                alignment: Alignment.center,
                                child: Icon(
                                  CupertinoIcons.phone_arrow_right,
                                  size: 25,
                                  color: HexColor(HexColor.color3333),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 5),
                                alignment: Alignment.center,
                                child: Text(
                                  '会议室',
                                  style: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize12,
                                    color: HexColor.color3333,
                                  ),
                                ),
                              )
                            ],
                          ),
                          Column(
                            children: [
                              Container(
                                alignment: Alignment.center,
                                child: Icon(
                                  CupertinoIcons.piano,
                                  size: 25,
                                  color: HexColor(HexColor.color3333),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 5),
                                alignment: Alignment.center,
                                child: Text(
                                  '餐厅',
                                  style: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize12,
                                    color: HexColor.color3333,
                                  ),
                                ),
                              )
                            ],
                          ),
                          Column(
                            children: [
                              Container(
                                alignment: Alignment.center,
                                child: Icon(
                                  CupertinoIcons.rectangle_3_offgrid,
                                  size: 25,
                                  color: HexColor(HexColor.color3333),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 5),
                                alignment: Alignment.center,
                                child: Text(
                                  '行李寄存',
                                  style: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize12,
                                    color: HexColor.color3333,
                                  ),
                                ),
                              )
                            ],
                          ),
                          Column(
                            children: [
                              Container(
                                alignment: Alignment.center,
                                child: Icon(
                                  CupertinoIcons.sun_dust_fill,
                                  size: 25,
                                  color: HexColor(HexColor.color3333),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 5),
                                alignment: Alignment.center,
                                child: Text(
                                  '热水淋雨',
                                  style: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize12,
                                    color: HexColor.color3333,
                                  ),
                                ),
                              )
                            ],
                          ),
                          Column(
                            children: [
                              Container(
                                alignment: Alignment.center,
                                child: Icon(
                                  CupertinoIcons.wrench_fill,
                                  size: 25,
                                  color: HexColor(HexColor.color3333),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 5),
                                alignment: Alignment.center,
                                child: Text(
                                  '商务中',
                                  style: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize12,
                                    color: HexColor.color3333,
                                  ),
                                ),
                              )
                            ],
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
                Container(
                  margin: const EdgeInsets.only(top: 15),
                  padding: const EdgeInsets.symmetric(horizontal: 15),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    boxShadow: [
                      BoxShadow(
                        offset: Offset.zero,
                        blurStyle: BlurStyle.outer,
                        spreadRadius: 0,
                        blurRadius: 4,
                        color: HexColor.rgba(242, 242, 242, 1),
                      ),
                    ],
                  ),
                  child: Column(
                    children: [
                      Container(
                        height: 40,
                        alignment: Alignment.centerLeft,
                        child: Text(
                          '住客评价',
                          style: StylesUtils.customTextStyle(
                            fontSize: StylesUtils.fontSize16,
                            fontWeight: FontWeight.w700,
                            color: HexColor.color3333,
                          ),
                        ),
                      ),
                      Center(
                        child: Container(
                          padding: const EdgeInsets.symmetric(horizontal: 10),
                          constraints: const BoxConstraints.expand(
                              width: 334, height: 91),
                          decoration: BoxDecoration(
                            color:
                                HexColor.rgba(255, 98, 98, 0.0980392156862745),
                            borderRadius: BorderRadius.circular(8),
                          ),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            crossAxisAlignment: CrossAxisAlignment.stretch,
                            children: [
                              Column(
                                children: [
                                  Container(
                                    margin: const EdgeInsets.only(top: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.center,
                                      children: [
                                        Text(
                                          '5.0',
                                          style: StylesUtils.customTextStyle(
                                            fontSize: StylesUtils.fontSize36,
                                            fontWeight: FontWeight.w700,
                                            color: HexColor.color3333,
                                          ),
                                        ),
                                        Container(
                                          margin:
                                              const EdgeInsets.only(left: 8),
                                          constraints:
                                              const BoxConstraints.expand(
                                                  width: 37, height: 24),
                                          decoration: BoxDecoration(
                                            gradient: LinearGradient(
                                              colors: [
                                                HexColor.rgba(255, 255, 0, 1),
                                                HexColor.rgba(255, 255, 0, 1),
                                                HexColor.rgba(255, 204, 102, 1),
                                                HexColor.rgba(255, 204, 102, 1),
                                              ],
                                              stops: const [0.0, 0.0, 1.0, 1.0],
                                              transform: GradientRotation(
                                                RadianUtils.radianToAngle(135),
                                              ),
                                            ),
                                          ),
                                          alignment: Alignment.center,
                                          child: Text(
                                            '超赞',
                                            style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize12,
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Wrap(
                                      spacing: 2,
                                      crossAxisAlignment:
                                          WrapCrossAlignment.center,
                                      alignment: WrapAlignment.start,
                                      children: [
                                        for (var i = 0; i < 5; i++)
                                          Icon(
                                            CupertinoIcons.star_fill,
                                            size: 15,
                                            color: HexColor(HexColor.colorFfc7),
                                          ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                              Expanded(
                                child: Padding(
                                  padding: const EdgeInsets.only(left: 5),
                                  child: Row(
                                    children: [
                                      Center(
                                        child: Container(
                                          height: 39,
                                          width: 2,
                                          color: HexColor(HexColor.colorFf62),
                                        ),
                                      ),
                                      Expanded(
                                        child: Container(
                                          margin:
                                              const EdgeInsets.only(left: 5),
                                          alignment: Alignment.center,
                                          child: SizedBox(
                                            width: 205,
                                            height: 36,
                                            child: Column(
                                              children: [
                                                Row(
                                                  mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .spaceBetween,
                                                  children: [
                                                    Text.rich(
                                                      TextSpan(
                                                        children: [
                                                          TextSpan(
                                                              text: '卫生5.0 ',
                                                              style: StylesUtils
                                                                  .customTextStyle(
                                                                fontSize:
                                                                    StylesUtils
                                                                        .fontSize12,
                                                                color: HexColor
                                                                    .color3333,
                                                              )),
                                                          WidgetSpan(
                                                              child: Container(
                                                                constraints:
                                                                    const BoxConstraints
                                                                        .expand(
                                                                        width:
                                                                            46,
                                                                        height:
                                                                            6),
                                                                decoration:
                                                                    BoxDecoration(
                                                                  color: HexColor(
                                                                      HexColor
                                                                          .colorFf62),
                                                                  borderRadius:
                                                                      BorderRadius
                                                                          .circular(
                                                                              3),
                                                                ),
                                                              ),
                                                              alignment:
                                                                  PlaceholderAlignment
                                                                      .middle),
                                                        ],
                                                      ),
                                                    ),
                                                    Text.rich(
                                                      TextSpan(
                                                        children: [
                                                          TextSpan(
                                                              text: '设置4.9 ',
                                                              style: StylesUtils
                                                                  .customTextStyle(
                                                                fontSize:
                                                                    StylesUtils
                                                                        .fontSize12,
                                                                color: HexColor
                                                                    .color3333,
                                                              )),
                                                          WidgetSpan(
                                                              child: Container(
                                                                constraints:
                                                                    const BoxConstraints
                                                                        .expand(
                                                                        width:
                                                                            46,
                                                                        height:
                                                                            6),
                                                                decoration:
                                                                    BoxDecoration(
                                                                  color: HexColor(
                                                                      HexColor
                                                                          .colorFf62),
                                                                  borderRadius:
                                                                      BorderRadius
                                                                          .circular(
                                                                              3),
                                                                ),
                                                              ),
                                                              alignment:
                                                                  PlaceholderAlignment
                                                                      .middle),
                                                        ],
                                                      ),
                                                    ),
                                                  ],
                                                ),
                                                Container(
                                                  margin: const EdgeInsets.only(
                                                      top: 10),
                                                  child: Row(
                                                    mainAxisAlignment:
                                                        MainAxisAlignment
                                                            .spaceBetween,
                                                    children: [
                                                      Text.rich(
                                                        TextSpan(
                                                          children: [
                                                            TextSpan(
                                                              text: '位置5.0 ',
                                                              style: StylesUtils
                                                                  .customTextStyle(
                                                                fontSize:
                                                                    StylesUtils
                                                                        .fontSize12,
                                                                color: HexColor
                                                                    .color3333,
                                                              ),
                                                            ),
                                                            WidgetSpan(
                                                                child:
                                                                    Container(
                                                                  constraints:
                                                                      const BoxConstraints
                                                                          .expand(
                                                                          width:
                                                                              46,
                                                                          height:
                                                                              6),
                                                                  decoration:
                                                                      BoxDecoration(
                                                                    color: HexColor(
                                                                        HexColor
                                                                            .colorFf62),
                                                                    borderRadius:
                                                                        BorderRadius
                                                                            .circular(3),
                                                                  ),
                                                                ),
                                                                alignment:
                                                                    PlaceholderAlignment
                                                                        .middle),
                                                          ],
                                                        ),
                                                      ),
                                                      Text.rich(
                                                        TextSpan(
                                                          children: [
                                                            TextSpan(
                                                              text: '服务4.9 ',
                                                              style: StylesUtils
                                                                  .customTextStyle(
                                                                fontSize:
                                                                    StylesUtils
                                                                        .fontSize12,
                                                                color: HexColor
                                                                    .color3333,
                                                              ),
                                                            ),
                                                            WidgetSpan(
                                                                child:
                                                                    Container(
                                                                  constraints:
                                                                      const BoxConstraints
                                                                          .expand(
                                                                          width:
                                                                              46,
                                                                          height:
                                                                              6),
                                                                  decoration:
                                                                      BoxDecoration(
                                                                    color: HexColor(
                                                                        HexColor
                                                                            .colorFf62),
                                                                    borderRadius:
                                                                        BorderRadius
                                                                            .circular(3),
                                                                  ),
                                                                ),
                                                                alignment:
                                                                    PlaceholderAlignment
                                                                        .middle),
                                                          ],
                                                        ),
                                                      ),
                                                    ],
                                                  ),
                                                )
                                              ],
                                            ),
                                          ),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                      Container(
                        margin: const EdgeInsets.only(top: 20),
                        child: Column(
                          children: [
                            SizedBox(
                              height: 46,
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.start,
                                crossAxisAlignment: CrossAxisAlignment.stretch,
                                children: [
                                  const CircleAvatar(
                                    radius: 23,
                                    backgroundImage: NetworkImage(
                                        'https://img1.baidu.com/it/u=1653751609,236581088&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'),
                                  ),
                                  Expanded(
                                    child: Padding(
                                      padding: const EdgeInsets.only(left: 10),
                                      child: Column(
                                        children: [
                                          Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceBetween,
                                            children: [
                                              Text(
                                                '1*****3',
                                                style:
                                                    StylesUtils.customTextStyle(
                                                  color: HexColor.color3333,
                                                  fontWeight: FontWeight.w700,
                                                ),
                                              ),
                                              Text(
                                                '5.0',
                                                style:
                                                    StylesUtils.customTextStyle(
                                                  color: HexColor.color3333,
                                                  fontWeight: FontWeight.w700,
                                                ),
                                              )
                                            ],
                                          ),
                                          Container(
                                            margin:
                                                const EdgeInsets.only(top: 8),
                                            child: Row(
                                              mainAxisAlignment:
                                                  MainAxisAlignment
                                                      .spaceBetween,
                                              children: [
                                                Text(
                                                  '2018-10-15 评价',
                                                  style: StylesUtils
                                                      .customTextStyle(
                                                    fontSize:
                                                        StylesUtils.fontSize12,
                                                    color: HexColor.color9999,
                                                  ),
                                                ),
                                                Wrap(
                                                  crossAxisAlignment:
                                                      WrapCrossAlignment.center,
                                                  alignment: WrapAlignment.end,
                                                  spacing: 3,
                                                  children: [
                                                    for (var i = 0; i < 5; i++)
                                                      Icon(
                                                        CupertinoIcons
                                                            .star_fill,
                                                        size: 12,
                                                        color: HexColor(
                                                            HexColor.colorFfc7),
                                                      ),
                                                  ],
                                                )
                                              ],
                                            ),
                                          )
                                        ],
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            Container(
                              alignment: Alignment.centerLeft,
                              margin: const EdgeInsets.symmetric(vertical: 15),
                              child: Text(
                                '房间很温馨，前台服务特别热情，位置也很好，离景区很近，距离火车站只要15分钟，下次出差还会来~',
                                style: StylesUtils.customTextStyle(
                                  color: HexColor.color6666,
                                  lineHeight: 1.5,
                                ),
                              ),
                            ),
                            StaggeredGrid.count(
                              crossAxisCount: 3,
                              crossAxisSpacing: 10,
                              children: [
                                ClipRRect(
                                  borderRadius: BorderRadius.circular(5),
                                  child: Image.network(
                                    'https://img0.baidu.com/it/u=3547733589,2906244886&fm=253&fmt=auto&app=120&f=JPEG?w=570&h=380',
                                    height: 86,
                                    fit: BoxFit.fill,
                                  ),
                                ),
                                ClipRRect(
                                  borderRadius: BorderRadius.circular(5),
                                  child: Image.network(
                                    'https://img0.baidu.com/it/u=1036442731,425423974&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
                                    height: 86,
                                    fit: BoxFit.fill,
                                  ),
                                ),
                                ClipRRect(
                                  borderRadius: BorderRadius.circular(5),
                                  child: Image.network(
                                    'https://img2.baidu.com/it/u=2006560660,1269823070&fm=253&fmt=auto&app=138&f=JPEG?w=570&h=380',
                                    height: 86,
                                    fit: BoxFit.fill,
                                  ),
                                ),
                              ],
                            ),
                            Container(
                              margin: const EdgeInsets.only(top: 10),
                              alignment: Alignment.centerLeft,
                              child: Text(
                                '标准大床房（不含窗）',
                                style: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize12,
                                  color: HexColor.color9999,
                                ),
                              ),
                            ),
                            Container(
                              alignment: Alignment.center,
                              margin:
                                  const EdgeInsets.only(top: 25, bottom: 20),
                              child: TextButton(
                                onPressed: () {
                                  Get.toNamed(Routes.hotelComment);
                                },
                                style: ButtonStyle(
                                  fixedSize: const WidgetStatePropertyAll(
                                    Size(114, 32),
                                  ),
                                  minimumSize: const WidgetStatePropertyAll(
                                    Size(114, 32),
                                  ),
                                  backgroundColor: WidgetStatePropertyAll(
                                    HexColor.rgba(
                                        255, 98, 98, 0.0980392156862745),
                                  ),
                                  alignment: Alignment.center,
                                  shape: WidgetStatePropertyAll(
                                    RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(16),
                                    ),
                                  ),
                                  padding: const WidgetStatePropertyAll(
                                      EdgeInsets.zero),
                                ),
                                child: Text(
                                  '更多269个评价',
                                  style: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize12,
                                    color: HexColor.colorFf62,
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      )
                    ],
                  ),
                ),
                Container(
                  margin: const EdgeInsets.only(top: 15),
                  padding: const EdgeInsets.symmetric(horizontal: 15),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    boxShadow: [
                      BoxShadow(
                        offset: Offset.zero,
                        blurStyle: BlurStyle.outer,
                        spreadRadius: 0,
                        blurRadius: 4,
                        color: HexColor.rgba(242, 242, 242, 1),
                      ),
                    ],
                  ),
                  child: Column(
                    children: [
                      Container(
                        height: 40,
                        alignment: Alignment.centerLeft,
                        child: Text(
                          '附近热销酒店',
                          style: StylesUtils.customTextStyle(
                            fontSize: StylesUtils.fontSize16,
                            color: HexColor.color3333,
                            fontWeight: FontWeight.w700,
                          ),
                        ),
                      ),
                      StaggeredGrid.count(
                        crossAxisCount: 2,
                        crossAxisSpacing: 15,
                        mainAxisSpacing: 15,
                        children: [
                          for (var i = 1; i < 36; i++)
                            Column(
                              children: [
                                Stack(
                                  children: [
                                    ClipRRect(
                                      borderRadius: BorderRadius.circular(5),
                                      child: Image.network(
                                        'https://img1.baidu.com/it/u=94075336,2243695003&fm=253&fmt=auto&app=138&f=JPEG?w=753&h=500',
                                        height: 110,
                                        fit: BoxFit.fill,
                                      ),
                                    ),
                                    Positioned(
                                      top: 8,
                                      right: 20,
                                      child: Container(
                                        constraints:
                                            const BoxConstraints.expand(
                                                width: 82, height: 20),
                                        decoration: BoxDecoration(
                                          color: HexColor.rgba(
                                              0, 0, 0, 0.498039215686275),
                                          borderRadius:
                                              BorderRadius.circular(10),
                                        ),
                                        alignment: Alignment.center,
                                        child: Text(
                                          '据我直线4.9km',
                                          style: StylesUtils.customTextStyle(
                                            fontSize: StylesUtils.fontSize10,
                                          ),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                                Container(
                                  margin: const EdgeInsets.only(top: 15),
                                  alignment: Alignment.centerLeft,
                                  child: Text(
                                    '顾北温泉度假酒店（朝阳大悦城店）',
                                    style: StylesUtils.customTextStyle(
                                      color: HexColor.color3333,
                                      lineHeight: 1.5,
                                    ),
                                  ),
                                ),
                                Container(
                                  alignment: Alignment.centerLeft,
                                  margin: const EdgeInsets.only(top: 10),
                                  child: Text.rich(
                                    TextSpan(
                                      children: [
                                        TextSpan(
                                          text: '¥460',
                                          style: StylesUtils.customTextStyle(
                                            color: HexColor.colorFf62,
                                            fontWeight: FontWeight.w700,
                                          ),
                                        ),
                                        TextSpan(
                                          text: ' 起',
                                          style: StylesUtils.customTextStyle(
                                            fontSize: StylesUtils.fontSize12,
                                            color: HexColor.color9999,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                                Container(
                                  alignment: Alignment.centerLeft,
                                  margin: const EdgeInsets.only(top: 10),
                                  child: Wrap(
                                    spacing: 15,
                                    alignment: WrapAlignment.start,
                                    crossAxisAlignment:
                                        WrapCrossAlignment.center,
                                    children: [
                                      Wrap(
                                        spacing: 5,
                                        alignment: WrapAlignment.start,
                                        crossAxisAlignment:
                                            WrapCrossAlignment.center,
                                        children: [
                                          for (var i = 0; i < 5; i++)
                                            Icon(
                                              CupertinoIcons.star_fill,
                                              size: 12,
                                              color:
                                                  HexColor(HexColor.colorFfc7),
                                            ),
                                        ],
                                      ),
                                      Text(
                                        '5.0分',
                                        style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize10,
                                          color: HexColor.colorFfc7,
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              ],
                            )
                        ],
                      ),
                    ],
                  ),
                )
              ],
            ),
            onObserve: (resultModel) {
              controller.tabController.index = ObserverUtils.calcAnchorTabIndex(
                observeModel: resultModel,
                tabIndexs: controller.tabIndexs,
                currentTabIndex: controller.tabController.index,
              );
            },
          ),
        ),
      ),
    );
  }

  /// 动画组件
  Widget get animationWidget {
    return SlideTransition(
      position: Tween<Offset>(
        begin: const Offset(0, -1.2), // 控制动画起始位置 (屏幕下方)
        end: const Offset(0, 0), // 控制动画结束位置 (屏幕中间)
      ).animate(
        CurvedAnimation(
            parent: controller.animationController, curve: Curves.easeInOut),
      ),
      child: Container(
        height: 88 + Get.mediaQuery.padding.top,
        color: Colors.white,
        // padding: Get.mediaQuery.padding,
        child: Column(
          children: [
            Container(
              height: 44,
              padding: const EdgeInsets.symmetric(horizontal: 0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  IconButton(
                    onPressed: Get.back,
                    icon: Text.rich(
                      TextSpan(
                        children: [
                          WidgetSpan(
                              child: Icon(
                                CupertinoIcons.chevron_back,
                                size: 20,
                                color: HexColor(HexColor.color3333),
                              ),
                              alignment: PlaceholderAlignment.middle),
                          TextSpan(
                            text: ' 现代通酒店',
                            style: StylesUtils.customTextStyle(
                              fontSize: StylesUtils.fontSize16,
                              color: HexColor.color3333,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  Wrap(
                    spacing: 5,
                    crossAxisAlignment: WrapCrossAlignment.center,
                    alignment: WrapAlignment.end,
                    children: [
                      IconButton(
                        onPressed: () {},
                        icon: Icon(
                          CupertinoIcons.compass_fill,
                          size: 20,
                          color: HexColor(HexColor.color3333),
                        ),
                      ),
                      IconButton(
                        onPressed: () {},
                        icon: Icon(
                          CupertinoIcons.heart_fill,
                          size: 20,
                          color: HexColor(HexColor.color3333),
                        ),
                      ),
                      IconButton(
                        onPressed: () {},
                        icon: Icon(
                          CupertinoIcons.location_fill,
                          size: 20,
                          color: HexColor(HexColor.color3333),
                        ),
                      ),
                    ],
                  )
                ],
              ),
            ),
            Expanded(
              child: Container(
                alignment: Alignment.center,
                padding: const EdgeInsets.only(bottom: 6),
                child: TabBar(
                  controller: controller.tabController,
                  tabs: controller.tabs
                      .map(
                        (str) => Tab(
                          text: str,
                        ),
                      )
                      .toList(),
                  isScrollable: false,
                  dividerHeight: 0,
                  unselectedLabelStyle: StylesUtils.customTextStyle(
                    color: HexColor.color3333,
                  ),
                  unselectedLabelColor: HexColor(HexColor.color3333),
                  labelStyle: StylesUtils.customTextStyle(
                    color: HexColor.colorFf62,
                  ),
                  labelColor: HexColor(HexColor.colorFf62),
                  indicatorColor: HexColor(HexColor.colorFf62),
                  indicatorSize: TabBarIndicatorSize.label,
                  indicatorWeight: 3,
                  onTap: (int index) {
                    controller.observerController.animateTo(
                      index: controller.tabIndexs[index],
                      duration: const Duration(milliseconds: 250),
                      curve: Curves.ease,
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return buildMain(context);
  }
}
